import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { ProFormText,ProFormDateTimePicker } from '@ant-design/pro-components';
import { InputNumber,Select } from 'antd'
import './style.less';
import axios from 'axios';
export default function applyLeave() {


  // 物流清单主题‘
  const [BOMTitle,setBOMTitle] = useState("")
  let BOMonChange = (e) =>{   // 修改物料清单主题的ProFormText框
    setBOMTitle(e.target.value)
  }
  // 制单人员
  const [BOMStaff,setStaff] = useState("张妍") 
  // 产品名称
  const [productName,setProductName] = useState("")
  let productChange= (e) =>{
    setProductName(e.target.value)
  }
  // 数量
  const [BOMNum,setCountNum] = useState("")
  let NumChange = (e) =>{
    setCountNum(e.target.value)
  }
  // 保存
  let SubmitClick = () =>{
    console.log("主题",BOMTitle);
    console.log("制单人员",BOMStaff);
    console.log("产品名称",productName);
    console.log("数量",BOMNum);
    let data = {BOMTitle:BOMTitle,BOMStaff:BOMStaff,productName:productName,BOMNum:BOMNum,BOMID:"WSD123442XX"}
    axios.post("/api/wl/add",data).then(value=>{
      console.log(value);
      
    })
  }
  
  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button onClick={SubmitClick}>保存</button>
        <button>保存且新增</button>
        <button>草稿箱</button>
        <button>导入</button>
      </div>
      <div className="applyLeaveContent">
        <h1>物料清单</h1>
        <table className="table">
          <thead>
            <th colSpan={8}>基本信息</th>
          </thead>
          <tbody>
            <tr>
              <td><span>*</span> 物料清单主题：</td>
              <td>
                <ProFormText onChange={BOMonChange} placeholder="请输入物料清单主题" value={BOMTitle} />
              </td>
              <td>
                物料清单编号：
              </td>
              <td>
                <ProFormText
                  width="md"
                  name="anumber"
                  disabled
                  placeholder={'保存后自动生成'}
                />
              </td>
              <td>
                 制单人员：
              </td>
              <td>
                <ProFormText
                  name="department"
                  disabled
                  value={BOMStaff}
                  placeholder=""
                />
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>备注：</td>
              <td colspan={8}>
                <input type="text" />
              </td>
            </tr>
          </tbody>
        </table>
        <table className="table">
          <thead>
            <th colSpan={8}>父件信息</th>
          </thead>
          <tbody>
            <tr>
              <td>
                <span>*</span> 产品名称：
              </td>
              <td>
                <ProFormText placeholder="请输入产品名称" value={productName} onChange={productChange}/>
              </td>
              <td>
                <span>*</span> 产品编号：
              </td>
              <td>

                <ProFormText
                  name="anumber"
                  disabled
                  placeholder={'保存后自动生成'}
                  value={''}
                  onChange={(e: any) => {}}
                />
              </td>
              <td>规格型号：</td>
              <td>
                <ProFormText
                  name="department"
                  placeholder=""
                />
              </td>
              <td>单位：</td>
              <td>
                <ProFormText
                  name="department"
                  placeholder=""
                />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span> 数量：
              </td>
              <td width="190px">
              <ProFormText
                  name="department"
                  value={BOMNum}
                  placeholder=""
                  onChange = {NumChange}
                />
                {/* <InputNumber  min={0} defaultValue={CountNum} onChange={NumChange} /> */}
              </td>
              <td>
                <span>*</span> 产品角色：
              </td>
              <td>
                <ProFormText
                  name="department"
                  placeholder=""
                />
              </td>
              <td>工艺流程：</td>
              <td>
                <ProFormText
                  name="department"
                  placeholder=""
                />
              </td>
              <td>耗损率（%）：</td>
              <td>
                <ProFormText
                  name="department"
                  placeholder=""
                />
              </td>
            </tr>
            <tr className="last"></tr>
          </tbody>
        </table>
        <table className="table">
          <thead>
            <th colSpan={8}>
              子件信息
              <button>增行</button>
              <button>删行</button>
              <button>导入</button>
              <button>导入模板</button>
            </th>
          </thead>
          <tbody>
            <table className="table1">
              <thead>
                <th>序号</th>
                <th>产品名称</th>
                <th>规格编号</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>产品比例</th>
                <th>数量</th>
                <th>产品角色</th>
                <th>工艺流程</th>
                <th>耗损率（%）</th>
                <th>领料方式</th>
                <th>备注</th>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>4</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>5</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>6</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>7</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>8</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>9</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </tbody>
        </table>
        <table className="table0">
          <tbody>
            <tr>
              <td colspan={9}>
                附件上传<button>批量上传</button>
              </td>
            </tr>
            <tr>
              <td>文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan={9}></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
